<template>
  <starPage :config="{ cols: null,title:''}">
    <starPage :config="pageConfig"  style="height:500px;" v-debug="{ me, vms, models, dataSet }">
      <template #leftCard>
        <starLine
          class="line-chart chart-item"
          :config="lineConfig"
          :language="lineLanguage"
          :data="lineData"
        ></starLine>
      </template>
      <template #rightCard>
        <starLine
          class="chart-item"
          :language="barLanguage"
          :data="barData"
          :config="barConfig"
          :options="{ type: 'bar' }"
        ></starLine>
      </template>
    </starPage>
    <mainTable :data="dataSet.tableData"></mainTable>
  </starPage>
</template>

<script>
import ancMixin from "./ancMixin";
export default {
  name: "",
  components: {},
  mixins: [ancMixin],
  data() {
    return {
      barLanguage: {
        "en-US": {
          headTitle: "monthly energy statistics",
          title: "",
        },
        "zh-CN": {
          headTitle: "柱图",
          title: "",
        },
      },
      barData: {
        categories: ["1", "2", "3", "4", "5", "6", "7"],
        values: {
          Email: [120, 132, 101, 134, 90, 230, 210],
          "Union Ads": [220, 182, 191, 234, 290, 330, 310],
          "Video Ads": [150, 232, 201, 154, 190, 330, 410],
          Direct: [320, 332, 301, 334, 390, 330, 320],
        },
      },
      barConfig: {
        type: "bar",
        toolbox: false,
        xAxisNameLocation: "",
        boundaryGap: true,
        yAxisNameLocation: "end",
        color: [
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc",
        ],
        legend: true,
        grid: {
          bottom: 40,
        },
        showBackground: true,
      },
      lineData: {
        categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        values: {
          Email: [120, 132, 101, 134, 90, 230, 210],
          "Union Ads": [220, 182, 191, 234, 290, 330, 310],
          "Video Ads": [150, 232, 201, 154, 190, 330, 410],
          Direct: [320, 332, 301, 334, 390, 330, 320],
        },
      },
      lineLanguage: {
        "en-US": {
          headTitle: "energy analysis for the current month",
          title: "",
        },
        "zh-CN": {
          headTitle: "线图",
          title: "",
        },
      },
      lineConfig: {
        type: "line",
        toolbox: false,
        xAxisNameLocation: "",
        boundaryGap: false,
        yAxisNameLocation: "end",
        legend: true,
        smooth: true,
        color: [
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc",
        ],
        grid: {
          bottom: 40,
        },
      },
    };
  },
  props: {},
  watch: {},
  computed: {
    pageConfig() {
      return {
        cols: [12, 12],
        contentStyle: {}, //内容区样式
        title: {
          "en-US": "",
          "zh-CN": "工序信息",
        }[this.G_Locale],
        left: {
          title: "线图", //标题；如果icon和title都为空，则不显示标题头
        },
        right: {
          title: "柱图", //标题；如果icon和title都为空，则不显示标题头
        },
      };
    },
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>
